<html>
<head>
  <title>Evernote Export</title>
  <basefont face="微软雅黑" size="2" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="exporter-version" content="YXBJ Windows/601568 (zh-CN, DDL); Windows/10.0.0 (Win64); EDAMVersion=V2;"/>
  <style>
    body, td {
      font-family: 微软雅黑;
      font-size: 10pt;
    }
  </style>
</head>
<body>
<a name="538"/>
<h1>05-函数（下）</h1>
<div>
<table bgcolor="#D4DDE5" border="0">
<tr><td><b>创建时间：</b></td><td><i>2018/4/13 10:04</i></td></tr>
<tr><td><b>更新时间：</b></td><td><i>2020/4/7 8:56</i></td></tr>
<tr><td><b>作者：</b></td><td><i>18081003141@163.com</i></td></tr>
</table>
</div>
<br/>

<div>
<span><div><div><span style="font-size: 18pt;">匿名函数：没有名字的函数</span></div><div><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><font face="等线" style="font-size: 14pt;">function () {</font></div><div><font face="等线" style="font-size: 14pt;">    console.log(123)</font></div><div><font face="等线" style="font-size: 14pt;">}</font></div><div><font face="等线" style="font-size: 14pt;">var test = function () {</font></div><div><font face="等线" style="font-size: 14pt;">    console.log(123)</font></div><div><font face="等线" style="font-size: 14pt;">}</font></div><div><font face="等线" style="font-size: 14pt;">div.onclick = function () {</font></div><div><font face="等线" style="font-size: 14pt;">    console.log(123)</font></div><div><font face="等线" style="font-size: 14pt;">}</font></div></div><div><span style="font-size: 18pt;"><br/></span></div><div><span style="font-size: 18pt;">自调用函数（</span><span style="font-size: 18pt;">IIFE</span><span style="font-size: 18pt;">）</span></div><div><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><span style="color: rgb(51, 51, 51); font-family: arial; font-variant-caps: normal; font-variant-ligatures: normal; font-size: 16pt;">Immediately Invoked Function Expression</span></span><span style="font-size: 13px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(51, 51, 51); font-family: arial; font-variant-caps: normal; font-variant-ligatures: normal;"> </span><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 12pt; color: rgb(51, 51, 51); font-family: arial; font-variant-caps: normal; font-variant-ligatures: normal;">（</span> <span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 12pt; color: rgb(51, 51, 51); font-family: arial; font-variant-caps: normal; font-variant-ligatures: normal;">立即调用函数表达式</span><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 12pt; color: rgb(51, 51, 51); font-family: arial; font-variant-caps: normal; font-variant-ligatures: normal;">）</span></div><div><font style="font-size: 8pt;"><br/></font></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><font face="等线" style="font-size: 14pt;">;(function () {</font></div><div><font face="等线" style="font-size: 14pt;">    console.log(123)</font></div><div><font face="等线" style="font-size: 14pt;">})()</font></div></div><div><span style="font-size: 18pt;"><br/></span></div><div><font style="font-size: 12pt; background-color: rgb(255, 250, 165);-evernote-highlight:true;">注意：自调用函数如果前一行没有分号，要在前面加上分号</font></div><div><span style="font-size: 18pt;"><br/></span></div><div><span style="font-size: 18pt;"><br/></span></div><div><span style="font-size: 18pt;">先来看一道题</span></div><div><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><br/></div><div><br/></div><div><span style="color: rgb(8, 8, 8); font-family: consolas; font-size: 14pt;">alert(a);</span></div><div style="min-height: 16pt;"><span style="min-height: 16pt; font-family: consolas; color: #364bc0; font-size: 14pt;">var</span> <span style="min-height: 16pt; font-family: consolas; color: #080808; font-size: 14pt;">a</span> <span style="min-height: 16pt; font-family: consolas; color: #577909; font-size: 14pt;">=</span> <span style="min-height: 16pt; font-family: consolas; color: #9b1ceb; font-size: 14pt;">1</span><span style="min-height: 16pt; font-family: consolas; color: #080808; font-size: 14pt;">;</span></div><div style="min-height: 16pt;"><span style="min-height: 16pt; font-family: consolas; color: #080808; font-size: 14pt;">alert(a);</span></div><div style="min-height: 16pt;"><span style="min-height: 16pt; font-family: consolas; color: #364bc0; font-size: 14pt;">function</span> <span style="min-height: 16pt; font-family: consolas; color: #db7800; font-size: 14pt;">a</span><span style="min-height: 16pt; font-family: consolas; color: #080808; font-size: 14pt;">(){alert(</span><span style="min-height: 16pt; font-family: consolas; color: #9b1ceb; font-size: 14pt;">2</span><span style="min-height: 16pt; font-family: consolas; color: #080808; font-size: 14pt;">);}</span></div><div style="min-height: 16pt;"><span style="min-height: 16pt; font-family: consolas; color: #080808; font-size: 14pt;">alert(a);</span></div><div style="min-height: 16pt;"><span style="min-height: 16pt; font-family: consolas; color: #364bc0; font-size: 14pt;">var</span> <span style="min-height: 16pt; font-family: consolas; color: #080808; font-size: 14pt;">a</span> <span style="min-height: 16pt; font-family: consolas; color: #577909; font-size: 14pt;">=</span> <span style="min-height: 16pt; font-family: consolas; color: #9b1ceb; font-size: 14pt;">3</span><span style="min-height: 16pt; font-family: consolas; color: #080808; font-size: 14pt;">;</span></div><div style="min-height: 16pt;"><span style="min-height: 16pt; font-family: consolas; color: #080808; font-size: 14pt;">alert(a);</span></div><div style="min-height: 16pt;"><span style="min-height: 16pt; font-family: consolas; color: #364bc0; font-size: 14pt;">function</span> <span style="min-height: 16pt; font-family: consolas; color: #db7800; font-size: 14pt;">a</span><span style="min-height: 16pt; font-family: consolas; color: #080808; font-size: 14pt;">(){alert(</span><span style="min-height: 16pt; font-family: consolas; color: #9b1ceb; font-size: 14pt;">3</span><span style="min-height: 16pt; font-family: consolas; color: #080808; font-size: 14pt;">);}</span></div><div style="min-height: 16pt;"><span style="min-height: 16pt; font-family: consolas; color: #080808; font-size: 14pt;">alert(a);</span></div></div><div><br clear="none"/></div><div><br/></div><div><br/></div><div><span style="font-size: 14pt;">JS运行和编译</span></div><ul><li><div><span style="font-size: 12pt;">语法分析</span></div></li></ul><div><span style="font-size: 16px;">            查找基本语法有没有错误</span></div><ul><li><div><span style="font-size: 12pt;">预解析</span></div></li></ul><div><span style="font-size: 16px;">            执行之前进行预解析</span></div><div><span style="font-size: 16px;">            var、function关键字提前到</span><span style="font-size: 16px; color: rgb(54, 101, 238);">当前作用域</span><span style="font-size: 16px;">的顶部，变量默认值为undefined，函数默认值为函数体代码块，当函数与变量重名时，保留函数。</span></div><ul><li><div><span style="font-size: 12pt;">解释执行</span></div></li></ul><div><br clear="none"/></div><div><br/></div><h3 style="margin: 10px 0px; padding: 0px; list-style-type: none; list-style-image: none; font-size: 16px; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><br/></h3><div><br clear="none"/></div><div><br/></div><div><br/></div><div><br clear="none"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16pt;">事件（简单认识了解）</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 12pt;">用户的行为：</span><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">onclick、ondblclick、onfocus、onblur、window.onload</span></div><div><span style="font-size: 12pt;">    是用户跟页面的交互，当用户跟页面进行一些“</span><span style="font-size: 12pt;">交流</span><span style="font-size: 12pt;">”的时候，页面通过js就会触发一些事件，比如鼠标点击的时候就会触发onclick事件，给这个事件绑定一个函数，那么这个时候函数就会被调用，代码就会被执行</span></div><div><br clear="none"/></div><div><span style="font-size: 16px;">事件类型：</span></div><div><span style="font-size: 16px;">    鼠标事件：click，dblclick，mousedown，mouseup，mouseover，mouseout，mouseenter、mouseleave、mousemove</span></div><div><span style="font-size: 16px;">                scroll    </span><span style="font-size: 16px;">mousewheel   </span> <span style="font-size: 16px;">鼠标滚轮</span></div><div><span style="font-size: 16px;">                contextmenu  鼠标右键（上下文菜单：在不同环境下右键菜单不一样）</span></div><div><br/></div><div><span style="font-size: 16px;">    mouseover：鼠标在元素身上移动穿过子元素的时候会被反复触发</span></div><div><span style="font-size: 16px;">    mouseenter：只是在进入元素的时候触发</span></div><div><span style="font-size: 16px;">    键盘事件：keydown，keyup，keypress</span></div><div><br/></div><div><span style="font-size: 16px;"> 表单事件：对表单元素操作之后会触发的事件</span></div><div><span style="font-size: 16px;">      单选框、多选框、下拉菜单 状态改变的时候会触发  onchange 事件</span></div><div><span style="font-size: 16px;">      表单提交的时候会触发 onsubmit   <span style="font-size: 16px; color: rgb(255, 0, 0);">触发在&lt;form&gt;元素身上</span></span></div><div><br/></div><div><br/></div><div><br/></div><div><span style="font-size: 14pt; color: rgb(54, 101, 238);">this关键字:<span style="min-height: 20pt; font-size: 17pt; background: rgb(227, 220, 137); color: rgb(149, 163, 171); font-family: consolas;">事件函数里面的this指的是事件触发对象</span></span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 16pt;">练习</span></div><div><span style="font-size: 16px; color: rgb(1, 1, 1);">       </span></div><div><div><br clear="none"/></div><ul><li><div><span style="font-size: 12pt;">某个公司采用公用电话传递数据，数据是四位的整数，在传递过程中是加密的，加密规则如下：每位数字都加上5,然后用除以10的余数代替该数字，再将第一位和第四位交换，第二位和第三位交换，请编写一个函数，传入原文，输出密文</span></div></li></ul></div><div><br clear="none"/></div><div><br clear="none"/></div><div><img src="00-笔记_files/Image.png" type="image/png" data-filename="Image.png" style="font-size: 12pt;"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div></div><div><br clear="none"/></div></span>
</div></body></html> 